<!DOCTYPE html>
<html lang="cn"><head><link href="css/main-css.css" rel="stylesheet"></head>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="x5-fullscreen" content="true">
	<meta name="full-screen" content="yes">
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>super video</title>
    <style>

      html,body {
    width: 100%;
    height: 100%;
    background-color: #292929;
      }
      * {
        padding: 0;
        margin: 0;
      }
      #videoContainer {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
      }
    </style>
  <body>
    <noscript>
      <strong>We're sorry but soucecode doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="videoContainer"></div>
    <!-- built files will be auto injected -->
<script type="text/javascript" src="js/superVideo.js"></script></body>
  <script>
    const nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
    const Dbspeen = new Super.DbspeenControl() // 倍速控件
    const BarrageControl = new Super.BarrageControl() // 弹幕控件
    const fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
    const video = new Super.Svideo('videoContainer', {
        source: new Super.VideoSource({ // 引入视频资源
          src: 'https://gitee.com/alex12075/supervideo/raw/master/source/85c5fca698e473ca91e23d54bba232a5.mp4'
        }),
        leftControls: [nextControl], // 控件栏左槽插入控件
        rightControls: [Dbspeen, fullScreenControl], // 控件栏右槽插入控件

    })
    video.addEventListener('change', (event) => { // 监听video各属性变化
      //  console.log(event)
    })
    nextControl.addEventListener('click', () => { // 监听“下一个”按钮控件点击事件
      alert('click next menu !!!')
    })
    fullScreenControl.addEventListener('fullscreen', () => { // 监听进入全屏
      console.log('is fullscreen !!!')
    })
    fullScreenControl.addEventListener('cancelfullscreen', () => { // 监听退出全屏
      console.log('cancel fullscreen !!!')
    })
    video.addEventListener('fullscreen', () => {
      console.log('is fullscreen !!!')
    })
  </script>
</html>
